
<template>
  <div class="twoStageWindow">
  	<div class="twoStageWindowTitle">
      <span>
        添加/编辑人员
      </span>
  		<div class="twoStageWindowClose"  >
  			<el-button size="mini" type="primary" v-on:click="close" >保存</el-button>
  			<el-button size="mini" v-on:click="close">取消</el-button>
  		</div>
  	</div>
    <div class="containercontent" style="margin-top:31px;min-height:100%;padding-top: 0;">
      <div style="padding-top:20px;">
        <div :class="{'tabName':true,'activeTab':nowTab=='basicInfo'}" v-on:click="nowTab='basicInfo'" >
          基本信息
        </div>
        <!-- <div  :class="{'tabName':true,'activeTab':nowTab=='maintenanceRecord'}" v-on:click="nowTab='maintenanceRecord'" >
          检测能力
        </div>
        <div  :class="{'tabName':true,'activeTab':nowTab=='periodicityPlan'}" v-on:click="nowTab='periodicityPlan'" >
          培训记录
        </div> -->
      </div>
      <div :style="{'border': '1px solid #b7b7b7','min-height':tabDivMinHeight+'px','padding':'0 20px 20px 0'}">
        <!-- 人员基本信息 -->
        <div v-if="nowTab=='basicInfo'">
          <div class="penalrow selectw100">
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  检测机构：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                     <el-input disabled size="mini" placeholder="不用录入，自动带出"></el-input>
                </div>
            </div>
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  组织架构账号：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-input disabled size="mini" placeholder="提前设置好的用户自动带出，水司新建用户自行选择"></el-input>
                </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  用户名：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-input size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  密码：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-input size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  姓名：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                     <el-input size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="inlineblock verticalmiddle infoitem">
                 <div class="inlineblock verticalmiddle">
                  岗位：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-select size="mini" v-model="gangweivalue" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </div>
            </div>
          </div>
          <!-- <div class="penalrow selectw100">
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  性别：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                     <el-input size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="inlineblock verticalmiddle infoitem">
                 <div class="inlineblock verticalmiddle">
                  生日：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                     <el-input size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>
          </div> -->
          <!-- <div class="penalrow selectw100">
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  入职时间：
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                     <el-input size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>
          </div> -->
          <div class="penalrow selectw100" style="padding-bottom:10px;" v-if="type=='edit'">
            人员角色
            <!-- <el-button style="position:absolute;right:20px;top: 5px;" size="mini" type="primary" >添加角色</el-button> -->
          </div>
          <div class="separaterow" v-if="type=='edit'">
            <div class="penalrow selectw100">
              <el-checkbox class="jueseCheckbox" >实验室主任</el-checkbox>
              <el-checkbox  class="jueseCheckbox" >检测人员</el-checkbox>
              <el-checkbox class="jueseCheckbox" >样品管理员</el-checkbox>
              <el-checkbox  class="jueseCheckbox" >采样人</el-checkbox>
            </div>
            <div class="penalrow selectw100">
              <el-checkbox class="jueseCheckbox" >设备管理员</el-checkbox>
              <el-checkbox  class="jueseCheckbox" >仓库管理员</el-checkbox>
              <el-checkbox class="jueseCheckbox" >质量负责人</el-checkbox>
              
            </div>
            <!-- <div class="penalrow selectw100">
              <el-checkbox  class="jueseCheckbox" >无机组组长</el-checkbox>
              <el-checkbox class="jueseCheckbox" >有机组组长</el-checkbox>
              <el-checkbox class="jueseCheckbox" >常规组组长</el-checkbox>
              <el-checkbox class="jueseCheckbox" >微生物组组长</el-checkbox>
            </div> -->
          </div>
        </div>
        <!-- 培训记录 -->
        <div v-if="nowTab=='periodicityPlan'" style="padding:10px 20px;">
          <div class="penalrow selectw100" style="padding-bottom:10px;">
            培训记录
            <!-- <el-button style="position:absolute;right:20px;top: 5px;" size="mini" type="primary" >添加培训记录</el-button> -->
          </div>
          <div class="separaterow">
            <el-table
              :data="peixunjiluTable"
              style="width: 100%"
              size="mini"
              key="roleTableDate"
              border
              >
              <el-table-column
                label="序号"
                min-width="50px"
                >
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>  
              </el-table-column>
              <el-table-column
                property="pxixunriqi"
                label="培训日期"
                min-width="100px">
              </el-table-column>
              <el-table-column
                property="peixunneirong"
                label="培训内容"
                min-width="120px"
                >
              </el-table-column>
              <el-table-column
                property="peixundidian"
                label="培训地点"
                min-width="120px"
                >
              </el-table-column>
              <el-table-column
                property="fujian"
                label="附件"
                min-width="120px"
                >
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="100px"
                >
                <template slot-scope="scope">
                  <el-button type="text" size="mini">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          </div>
        </div>
        <!-- 人员资质 -->
        <div v-if="nowTab=='maintenanceRecord'" style="padding:10px 20px;">
          <div class="penalrow selectw100" style="padding-bottom:10px;">
            人员资质
            <el-button style="position:absolute;right:20px;top: 5px;" size="mini" type="primary" >添加能力参数</el-button>
          </div>
          <div class="separaterow">
            <el-table
                :data="abilityTableDate"
                style="width: 100%"
                :height="tableheight"
                size="mini"
                key="abilityTableDate"
                border
                >
                <el-table-column
                  label="序号"
                  fixed
                  min-width="50px"
                  >
                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>  
                </el-table-column>
                <el-table-column
                  property="abilityName"
                  label="能力参数"
                  fixed
                  min-width="200px">
                </el-table-column>
                <el-table-column
                  property="sampleTypeName"
                  label="样品类型"
                  
                  min-width="100px">
                </el-table-column>
                <el-table-column
                  property="typeofAbilityName"
                  label="检测项目分组"
                  
                  min-width="200px">
                </el-table-column>
                
                <el-table-column
                  property="abilityCode"
                  label="能力参数代码"
                  min-width="200px">
                </el-table-column>
                <el-table-column
                  property="abilityMethod"
                  label="方法"
                  min-width="200px">
                </el-table-column>
                <el-table-column
                  property="reportName"
                  label="报告名"
                  min-width="200px">
                </el-table-column>
                <el-table-column
                  property="mainEquipName"
                  label="主仪器"
                  min-width="200px">
                </el-table-column>
                </el-table-column>
                <el-table-column
                  property="frontEquipName"
                  label="辅助仪器"
                  min-width="200px">
                </el-table-column>
                <el-table-column
                  property="typeofAbilityStatus"
                  label="启用状态"
                  min-width="120px"
                  >
                   <template slot-scope="scope">
                     <el-select v-model="abilityTableDate[scope.$index].abilityStatus" placeholder="筛选批状态" size="mini" style="width:100px;" @change="changeAbilityStatus(scope.row)" :class="abilityTableDate[scope.$index].abilityStatus==0?'backDisabled':'backEnabled'" disabled>
                        <el-option
                          v-for="item in enableStatus"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                   </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed='right'
                  min-width="100px"
                  >
                  <template slot-scope="scope">
                    <el-button type="text" size="mini">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 人员分组 -->
        <div v-if="nowTab=='renyuanfenzu'" style="padding:10px 20px;">
          <div class="penalrow selectw100" style="padding-bottom:10px;">
            人员分组
            <el-button style="position:absolute;right:20px;top: 5px;" size="mini" type="primary" >添加分组</el-button>
          </div>
          <div class="separaterow">
            <el-table
              :data="typeofAbilityTableDate"
              style="width: 100%"
              :height="tableheight"
              size="mini"
              key="typeofAbilityTableDate"
              border
              >
              <el-table-column
                label="序号"
                min-width="50px"
                >
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>  
              </el-table-column>
              <el-table-column
                property="typeofAbilityName"
                label="分组名称"
                min-width="100px">
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="100px"
                >
                <template slot-scope="scope">
                  <el-button type="text" size="mini">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      nowTab:'basicInfo',
      mainEquipTypeValue:'',
      frontEquipTypeValue:'',
      factoryDate:'',
      purchaseDate:'',
      currentPage:1,
      supplierTableDateValue:'',
      peixunjiluTable:[
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        },
                        {
                          pxixunriqi:'2018-01-01',
                          peixunneirong:'培训内容',
                          peixundidian:'深圳市xxx区xxxx',
                          fujian:'附件1、附件2'
                        }
      ],
      gangweivalue:'',
      options:[
                {
                  value:'000',
                  label:'有机组'
                },
                {
                  value:'001',
                  label:'无机组'
                },
                {
                  value:'002',
                  label:'生物组'
                },
                {
                  value:'003',
                  label:'放射性组'
                }
      ],
    }
  },
  props:['eqType','eqEditOrNew','detailType','type'],
  computed:{
    ...mapState(['enableStatus','mainEquipType','frontEquipType','supplierTableDate','tableHeightD','tableHeightE','tableHeightA','abilityTableDate','yesorno','roleTableDate','abilityTableDate','typeofAbilityTableDate']),
    pointTableHeight(){
      return (((window.innerHeight - 190)*0.3)-40)
    },
    pickSampleTaskHeight(){
      return (((window.innerHeight - 190)*0.3)-40)
    },
    testTableHeight(){
      return (((window.innerHeight - 190)*0.4)-40)
    },
    tabDivMinHeight(){
      return (window.innerHeight - 260)
    },
    tableheight(){
      return (this.tableHeightA-30)
    }
  },
  mounted(){
    
  },
  methods:{
  	close:function(){
  		this.$parent.userDetailShow=false;
  	},
    handleSizeChange:function(){

    },
    handleCurrentChange:function(){

    },
    // handleSelectionChange(val) {
    //     this.multipleSelection = val;
    // },
    editMaintainPlan:function(){

    },
    editCheckPlan:function(){

    },
    editPeriodCheckPlan:function(){

    },
    changeMaintainPlanStatus:function(){
      //改变维护计划状态
    },
    changeCheckPlanStatus:function(){
      //改变检定校准计划状态
    },
    changePeriodChecPlanStatus:function(){
      //改变期间校核计划状态
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
.activeTab{
  color: #409eff;
}
.tabPageContent{

}
.infoitem {
    width: calc(100%/2);
    padding-right: 20px;
}
.separaterow{
  margin-top: 5px;
}
.informationItem {
    width: calc(100% - 113px);
    float: right;
}
.jueseCheckbox{
  width: 25%;
}
</style>
